import React, { Component } from "react"
import { WingBlank, WhiteSpace, NavBar, Button, Icon, List, Picker, InputItem, TextareaItem, Toast } from 'antd-mobile'

import { ajax, isSuccess } from "../../api/ajax"

export default class Editor extends Component {

    state = {
        pickerValue: [],
        plans: [],
        title: "",
        content: "",
    }

    componentDidMount() {
        /**
         * 如果是从详情跳转过来的,则带有state参数
         */
        var state = this.props.location.state;
        if (this.props.location.state && state.id) {
            this.setState(state)
        }
        //加载所有Plan
        this.reqPlans();
    }


    reqCardDetail = async (id) => {
        var response = await ajax("/card/get/cardDetail/" + id);
        if (isSuccess(response)) {
            var data = response.data.data;
            this.setState(data)
        }
    }

    /**
     * 请求后台所有Plan
     */
    reqPlans = async () => {
        var response = await ajax("/plan/get/all");
        console.log("request success, response: ", response);

        /**
         * 选中计划
         */
        if (isSuccess(response)) {
            var pickerValue = [];
            var planId;
            var data = response.data.data;
            var planName = this.state.planName;
            if (planName) {
                pickerValue = [planName]
                planId = data.find(plan => plan.value === planName).id;
            } else {
                pickerValue = [data[0].value]
                planId = data[0].id
            }
            this.setState({ ...this.state, plans: data, pickerValue: pickerValue, planId: planId })
        }
    }

    /**
     * 计划选择器改变
     * @param {} value 
     */
    pickerChange = (value) => {
        var pickPlan = this.state.plans.find(plan => plan.value === value[0]);
        this.setState({
            pickerValue: value,
            planId: pickPlan.id,
        })
    }

    titleChange = (value, field) => {
        this.setState({
            [field]: value
        })
    }

    back = () => {
        this.props.history.goBack()
    }

    saveCard = async () => {
        var { id, title, content, planId } = this.state;
        console.log("save card: ", id, title, content, planId)
        //validate
        if (title.length <= 0 || content <= 0 || !planId) {
            return Toast.fail('请补充内容', 1);
        }

        var path = id ? "update" : "create";
        var response = await ajax("/card/" + path, { id, title, content, planId }, "POST")
        if (isSuccess(response)) {
            Toast.success('保存成功', 0.5, () => {
                this.props.history.replace("/")
            });
        }

    }

    render() {
        let pickerValue = this.state.pickerValue
        return (
            <div>
                <NavBar mode="light"
                    icon={<span onClick={this.back}><Icon type="left" /></span>}
                // rightContent={<span onClick={this.back}>预览</span>}
                >编辑</NavBar>
                <WhiteSpace />
                <WingBlank size="md">
                    <InputItem
                        clear
                        placeholder="请输入卡片标题"
                        value={this.state.title}
                        onChange={(value) => this.titleChange(value, "title")}
                    ></InputItem>
                    <WhiteSpace />
                    <TextareaItem
                        placeholder="请输入要记忆的内容"
                        // autoHeight={true}
                        value={this.state.content}
                        rows={15}
                        clear
                        onChange={(value) => this.titleChange(value, "content")}
                    />
                    <WhiteSpace />
                    <Picker data={this.state.plans} cols={1}
                        value={pickerValue}
                        onChange={this.pickerChange}
                        className="forss">
                        <List.Item arrow="horizontal">记忆曲线</List.Item>
                    </Picker>
                </WingBlank>

                <div style={{ position: 'fixed', bottom: 0, width: '100%' }}>
                    <WingBlank><Button type="primary" onClick={this.saveCard}>保存卡片</Button></WingBlank>
                </div>
            </div>

        )
    }
}